<template>
    <div class="main">
        <header class="header">
            <div class="left">
                <div class="img">
                    <img src="@/assets/avatar.d6615a6.png" alt="头像">
                </div>
                <div class="text">
                    <p class="mt-4">
                        <h4 class="font-bold">感谢您对公司的付出，加班也要注意不要过度劳累哦。</h4>
                        <span class="mt-2 block text-xs">产品经理</span>
                    </p>
                </div>
                <div class="space"></div>
            </div>
        </header>
        <section class="section">
            <el-row>
                <el-col :md="15">
                    <ul class="todo">
                        <li>
                            <p class="p-todo">【待办】：熊润发发起的招聘需求审批流程 停留1天</p>
                        </li>
                        <li>
                            <p class="p-todo">【待办】：熊润发发起的招聘需求审批流程 停留1天</p>
                            <p style="margin-right:10px;">2022-01-12</p>
                        </li>
                        <li>
                            <p class="p-todo">【待办】：熊润发发起的招聘需求审批流程 停留1天</p>
                        </li>
                    </ul>
                </el-col>
                <el-col :md="9">
                    <div class="nav">
                        123
                    </div>
                </el-col>
            </el-row>
        </section>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import SearchForm from '@/components/i-form-search/index.vue'
import FormItem from '@/components/i-form-item/index.vue'
const searchForm = ref({
    name: '',
    employee: '123',
    school: '',
    org: ''
})
watch(() => searchForm.value.employee, (n, o) => {
    console.log('o=', o, n)
}, { deep: true })

</script>
<style scoped lang="less">
.main {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    background-color: #ffffff;
    width: 100%;
    height: 88px;
}

.left {
    display: flex;
    height: 100%;
    width: 100%;

    .img {
        width: 88px;
        position: relative;

        img {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: rgb(117, 162, 236);
            position: relative;
            left: 50%;
            top: 50%;
            margin-top: -28px;
            margin-left: -28px;
        }
    }

    .text {
        width: 336px;
        h4 {
            font-size: 14px;
            // font-weight: 700;
        }
    }

    .space {
        flex: 1;
    }

}

.section {
    width: 100%;
    height: calc(100% - 88px);

    .todo:last-child {
        border-bottom: none;
    }

    .todo {
        margin: 16px 16px 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        box-shadow: 0 0 13px 0 rgb(42 60 89 / 5%);
        border-radius: 2px;

        li {
            display: flex;
            justify-content: space-between;
            height: 50px;
            list-style-type: none;
            border-bottom: 1px solid #e8e8e8;

            .p-todo {
                color: #595959;
                font-size: 14px;
                height: 50px;
                line-height: 22px;
                margin-left: 10px
            }

            .p-todo:hover {
                color: #14a9ef;
            }
        }
    }

    .nav {
        margin: 16px 16px 16px 0;
        background: yellow
    }
}
</style>